<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_图片插入</title>
</head>
<body>
    <!-- 右键选中.html文件“open in” “Exploer” -->
    <!-- 图片路径是从当前要插入图片的html触发去找资源
        1.）图片与html在同一级目录：直接写图片全名！
        2.）图片与html文件的下一级目录：先写目录名，在写下一积木途中的图片全名！
        3.）图片与html文件的上一级目录：先写../回到上一级目录，再写上一级目录中的图片全名！-->
    <img src="1.png" alt="">
    <img src="img/2.png" alt="">
    <img src="../image.png" width="640px">
    <!-- width设置图片宽度 height设置图片高度 图片失真：图片的宽高比例不对  压缩或拉伸了  图片本身是后大小和宽高比的，可以只设置宽高其中一个属性，另一个会跟着改 -->
    <img src="../image.png" width="640px">
    <img src="../image.png" width="640px">
    <img src="../image.png" width="640px">
    <!-- alt用来设置图片无法正常显示是的替换文字 -->
    <img src="abc" alt="呀！！！！图片被半路截胡了！！">
    <hr >

    <!-- 绝对路径: 以协议或盼复开头，从根路径出发去找资源 -->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///232f07e6fb07481488d03ab10b82aec5.png" alt="">
</body>
</html>